<html>
<head>
<script type="application/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="application/javascript" src="abssoft.js"></script>
<script type="application/javascript" src="1/knockout-debug.js"></script>
<script type="application/javascript" src="1/knockout.mapping.js"></script>
<style>
.logo {
    border: 0 none;
    display: block;
    height: 2rem;
    max-height: 2rem;
    max-width: 15rem;
    padding: 0.5rem 0 0 0.75rem;
}
aside {
    background-color: #f2f2f2;
    bottom: 0;
    box-sizing: border-box;
    left: 0;
    max-width: 16.5rem;
    padding: 0;
    position: absolute;
    top: 0;
    width: 16.5rem;
    z-index: 1;
}
a.logo {
    display: block;
    height: 3em;
    left: 0;
    margin: 0;
    padding: 0;
    position: relative;
    top: 0;
    width: 16.5rem;
}
nav a:hover {
    color: #666;
    outline: medium none;
    text-decoration: none;
}
a {
    color: #666;
    text-decoration: none;
}
.vscroll {
    overflow-y: auto;
}
.scrollcontainer {
    box-sizing: border-box;
    
}
nav {
    bottom: 0;
    left: 0;
    margin: 0;
    max-width: 16.5rem;
    padding: 0;
    position: absolute;
    top: 0;
    transform-origin: left top 0;
    transition: all 0.2s ease-in-out 0s;
    width: 16.5rem;
}
.scrollcontainer > .wrapper {
    box-sizing: border-box;
    transform: translateZ(0px);
}
*::-moz-selection {
    background: none repeat scroll 0 0 #b3d4fc;
    text-shadow: none;
}
section {
    background: none repeat scroll 0 0 #f2f2f2;
    bottom: 0;
    box-shadow: -1px 0 0.125rem rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    left: 16.5rem;
    position: static;
    right: 0;
    top: 0;
    transition: all 0.2s ease-in-out 0s;
    z-index: 0;
}
section.content {
    background: none repeat scroll 0 0 #fff;
    bottom: 0;
    box-sizing: border-box;
    left: 0;
    position: absolute;
    right: 0;
    top: 3em;
}
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
	
}
table{
width:80%;
}

</style>
</head>
<body>
<section>
               
<aside class="master">
<nav class="scrollcontainer vscroll">
 <div class="wrapper">
                        <header>
                            <div>
<img  class="logo" src="1/softools.svg" />
</div>
</header>


<ul >
<li data-bind="foreach: { data: apps  }" style='padding-top: 12px; -moz-padding-start:10px;'>
<span  data-bind="text: Title"></span>


<div data-bind="foreach: { data: Reports  }">   
   <ul>
<li>
 <a   data-bind="text: Title ,attr: { text: Title }, click: function(data, event) { $root.getAppReport(data,$parent);$root.getAppReportField(data,$parent); $root.getAppReportFieldAuto(data,$parent);  $root.getAppReportFieldId(data,$parent); }" onclick="this.blur();" href="javascript:void(0)"></a>

</li>
</ul>    
</div>
</li>
</ul>		
</div>	
</nav>
</aside>
 <header>
<!--Write code here for header-->
</header>				
<section class="content scrollcontainer vscroll vscroll-scroll responsive-container">
 <div class="wrapper">
<div data-bind="ifnot:{ data: reports1 }">
<img style="margin-left:256px; width: 1000px;" src="Enterprise Application Platform.png" />
</div>

<table style="margin-left:266px;">
    <thead>
        <tr>
            <th style="background-color:black"><font color="#fff">Title<font></th>
            <th style="background-color:black;text-align:right;"><font color="#fff">Status<font></th>
			<th style="background-color:black;text-align:right;"><font color="#fff">Type<font></th>
			
        </tr>
    </thead>
    <tbody data-bind="foreach: { data: reports6}">
        <tr>
            <td data-bind="text: Title"></td>
            <td style="text-align:right;"data-bind="text:Status"></td>
			 <td style="text-align:right;"data-bind="text:Type"></td>
		
        </tr>
    </tbody>
</table>
<hr />
<hr />
<table style="margin-left:266px;">
    <thead>
        <tr>
            <th style="background-color:black"><font color="#fff">Id<font></th>
            <th style="background-color:black;text-align:right;"><font color="#fff">Title<font></th>
			<th style="background-color:black;text-align:right;"><font color="#fff">Identifier<font></th>
			<th style="background-color:black;text-align:right;"><font color="#fff">Label<font></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: { data: reports2}">
        <tr>
            <td data-bind="text: Id"></td>
            <td style="text-align:right;"data-bind="text:SystemLabel"></td>
			 <td style="text-align:right;"data-bind="text:Identifier"></td>
			  <td style="text-align:right;"data-bind="text:Label"></td>
        </tr>
    </tbody>
</table>
</div>
</section>
</section>



</body>
</html>